<template>
    <div class="express-assignment">
        <el-row>
            <el-col style="margin-top: 10px;margin-left: 20px; " :span="3" v-for="(item,index) in expressDetailData"
                    :key="index">
                <span class="ddid-box">{{item.full_dingdong}}</span>
            </el-col>
        </el-row>
        <el-row style="margin: 20px 0">
            <el-col :span="4" class="alignright">选择司机：</el-col>
            <el-col :span="18">
                <driver-cascader v-model="driverId" :cascader-option="cascaderOption" :palace-name="'司机选择'"></driver-cascader>
            </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitOrder">确定接管</el-button>
        </div>
    </div>

</template>

<script>
    import DriverCascader from '../expressAssign/cascader/Cascader';

    export default {
        name: 'express-assignment',
        components: {
            DriverCascader
        },
        props: {
            paramsId: {
                type: String,
                default: null
            }
        },
        data() {
            return {
                driverId: null,
                expressDetailData: [],
                cascaderOption: [{value:'kong',label:'空'}],
                driverTreeApi: 'user/driver/tree', // 司机api

            }
        },
        mounted() {
            if (this.paramsId) {
                this.getExpressDetail();
                this.getDriverTreeData();
            }
        },
        methods: {
            submitOrder() {
                if (!this.driverId) {
                    this.$message.error('请选择司机！');
                    return;
                }
                let order_id = this.paramsId.split(',');
                let params = {
                    "order_ids": order_id,
                    "driver_id": this.driverId,
                    "type": "take_over"
                };
                this.$http.post('express/mission/takeover',params)
                    .then((response) => {
                        this.$message({
                            message: '恭喜你，接管成功！',
                            type: 'success'
                        });
                        this.$emit('closeDialog');
                        this.$store.commit('refreshDialog');
                    })
                    .catch((error) => {
                        if (error.response.data.msg) {
                            this.$message.error(error.response.data.msg);
                        } else {
                            this.$message.error('请求错误：' + error.response.status);
                        }
                    });
            },
            getDriverTreeData() {
                this.$http.get(this.driverTreeApi)
                    .then((response) => {
                        response.data.data.forEach((item) => {
                            this.cascaderOption.push(item)
                        });

                    })
                    .catch((error) => {
                        if (error.response.data.msg) {
                            this.$message.error(error.response.data.msg);
                        } else {
                            this.$message.error('请求错误：' + error.response.status);
                        }
                    });
            },
            getExpressDetail() {
                let self = this;
                let api = 'express/order?size=1&pageSize=' + this.paramsId.length + '&id$=[' + this.paramsId + ']';
                this.$http.get(api)
                    .then((response) => {
                        self.expressDetailData = response.data.data;
                    })
                    .catch((error) => {
                        if (error.response.data.msg) {
                            self.$message.error(error.response.data.msg);
                        } else {
                            self.$message.error('请求错误：' + error.response.status);
                        }
                    });

            }
        }
    }
</script>

<style lang="less">
    .express-assignment {
        .ddid-box {
            display: block;
            padding: 10px 20px;
            text-align: center;
            color: #e6a23c;
            background-color: #e2e2e2;
            font-size: 13px;
            border-radius: 6px;

        }
        .alignright {
            line-height: 42px;
            text-align: right;
        }
    }
</style>

